<template>
	<view class="detailType-page">
		<view class="top">
			<view class="back" @click="back"></view>
			<view class="name">{{itemData.name}}</view>
			<view class="price">
				<span style="color: #ccc;font-size: 4vw;">参考价&nbsp;:</span>
				<span
					style="color: #f69409; font-size: 5vw; margin-left: 2vw;margin-right: 1vw; font-weight: bold;">￥{{itemData.price}}</span>
			</view>
			<view class="attribute">
				<span style="color: #ccc;font-size: 4vw;">属性&nbsp;:</span>
				<span style="font-size: 4vw;">隐秘</span>
				<span style="font-size: 4vw;">普通</span>
				<span style="font-size: 4vw;">步枪</span>
			</view>
			<view class="changeStarTark" @click="changeStart">
				<view class="text" style="font-size: 4vw;">{{Starttext}}</view>
				<view class="icon"></view>
			</view>
			<view class="bgImg" :style="{ backgroundImage: 'url(' + itemData.image + ')' }">

			</view>
		</view>
		<view class="main">
			<view class="tab">
				<view :class="activeTab==index?'active tab-item':'tab-item'" v-for="(item,index) in tabList"
					:key="index" @click="changeTab(item,index)">
					{{item}}
					<view v-if="item==='出售'">({{sellList.length}})</view>
					<view class="line"></view>
				</view>
			</view>
			<!-- 磨损/出售记录 -->
			<view class="sell" v-if="activeTab==0">
				<view class="siftDrop">
					<!-- 	<ren-dropdown-filter :filterData='filterData' :defaultIndex='defaultIndex' @onSelected='ed'
						@dateChange='dateChange'></ren-dropdown-filter> -->
					<view class="sort_tool">
						<view :class="sortIndex==0?'default active':'default'" @click="defaultSort">
							默认▼
						</view>
						<view :class="sortIndex==1?'priceSort active':'priceSort'" @click="changeSort">
							{{priceSortText}}
						</view>
					</view>
					<!-- <view class="sift" @click="sift">
						筛选
					</view> -->
				</view>
				<!-- 出售列表 -->
				<u-list class="sellList">
					<u-list-item class="sell-item" v-for="(item,index) in sellList" :key="index">
						<view style="width: 100%; height: 100%;display: flex;justify-content: space-between;"
							@click="sellItem(item,index)">
							<view class="sell-item-left">
								<view class="msg">
									<dl>
										<dt>
											<view class="img" :style="{ backgroundImage: 'url(' + item.image + ')' }">
											</view>
											<view class="wear">
												<span v-if="item.wear_status==1">无磨损</span>
												<span v-if="item.wear_status==2" style="color: #993a38;">战痕累累</span>
												<span v-if="item.wear_status==3" style="color: #d9534f;">破损不堪</span>
												<span v-if="item.wear_status==4" style="color: #f0ad4e">久经沙场</span>
												<span v-if="item.wear_status==5" style="color: #5cb85c;">略有磨损</span>
												<span v-if="item.wear_status==6" style="color: green;">崭新出厂</span>
												<span v-if="item.wear_status==7">其他</span>
											</view>
										</dt>
										<dd>
											<view class="price">￥<span>{{item.price}}</span></view>
											<view class="userinfo">
												<view class="avatar"
													style="background-image: url('https://tse1-mm.cn.bing.net/th/id/OIP-C.VHGYlc-OvclFm8UJcGzxgAAAAA?w=198&h=198&c=7&r=0&o=5&dpr=1.3&pid=1.7');">
												</view>
												<view class="username">系统出售</view>
											</view>
										</dd>
									</dl>
								</view>

							</view>
							<view class="sell-item-right">
								<view class="buy-btn">购买</view>
								<!-- 印花列表 -->
								<view class="printing" v-if="item.printing">
									<view class="printing-item" v-for="(items,indexs) in item.printing" :key="indexs">
										<view class="printing-wear">
											{{items.wear}}
										</view>
										<view class="printing-img"
											:style="{ backgroundImage: 'url(' + items.img + ')' }">
										</view>
									</view>
								</view>
							</view>

						</view>
					</u-list-item>
				</u-list>
			</view>
			<view class="record" v-if="activeTab==1">
				<view class="empyt" v-if="recordList.length<1">
					暂无记录
				</view>
				<view class="record-item" v-else v-for="(item,index) in formattedTimes" :key="index">
					<view class="left">
						<view class="imgBox">
							<view class="img" :style="{ backgroundImage: 'url(' + item.jewerly_history.image + ')' }">
							</view>
						</view>
						<view class="msgBox">
							<view class="name">
								{{item.jewerly_history.name}}
							</view>
							<view class="num">
								数量：123
							</view>
							<view class="price">
								￥{{item.jewerly_history.price}}
							</view>
						</view>
					</view>
					<view class="time">
						{{item.formattedTime}}
					</view>
				</view>
			</view>
		</view>
		<!-- 筛选弹出层 -->
		<u-popup :show="siftShow" :closeOnClickOverlay="true" mode="right" @close="siftClose" @open="siftOpen">
			<view class="siftBox">
				<view class="sift-top">{{siftTitle}}
					<view class="back" @click="siftBack"></view>
				</view>
				<view class="sift-main">
					<view class="left">
						<view v-if="siftTabIndex==0" class="pattern-templates">
							<view class="title-one">
								图案模板
							</view>
							<view class="box-one">
								<u-search placeholder="请输入模板编号" class="temp-search" searchIcon="" :showAction='false'
									v-model="tempSearchText" maxlength="5" inputAlign='center'></u-search>
							</view>
							<view class="title-two">
								特殊款式
							</view>
						</view>
						<!-- 磨损区间 -->
						<view v-if="siftTabIndex==1"></view>
						<!-- 出售价格 -->
						<view v-if="siftTabIndex==2"></view>
					</view>
					<view class="right">
						<view :class="siftTabIndex==index?'active right-tab-item':'right-tab-item'"
							v-for="(item,index) in siftTabData" :key="index" @click="siftChangeTab(item,index)">{{item}}
							<view class="line" v-if="siftTabIndex==index"></view>
						</view>
					</view>
				</view>
				<view class="sift-bottom">
					<button class="reset">重置</button>
					<button class="sure" @click="siftSure">确定</button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import RenDropdownFilter from '@/components/ren-dropdown-filter/ren-dropdown-filter.vue'
	import wearProgressVue from '../../components/wear-progress.vue';
	export default {
		data() {
			return {
				//排序下标
				sortIndex: 0,
				//价格升降
				priceSortText: "价格升序▲",
				//出售/成交记录下标
				activeTab: 0,
				//详情数据
				itemData: {},
				// 筛选弹出框
				siftShow: false,
				siftTitle: "筛选",
				tabList: ["出售", "成交记录"],
				//图案模板搜索
				tempSearchText: "",
				// 出售数据
				sellList: [],
				//成交记录
				recordList: [],
				// 默认/磨损区间
				filterData: [
					[{
						text: '默认',
						value: ''
					}],
					[{
						text: '磨损区间',
						value: ''
					}]
				],
				defaultIndex: [0, 0],
				siftTabData: ["图案模板", "磨损区间", "出售价格"],
				siftTabIndex: 0,
				pageNum: 1,
				//背景色
				bgColor: "#fff",
				//文本色
				textColor: "#2A2D2E",
				Starttext: "普通"
			}
		},
		components: {
			RenDropdownFilter,
			wearProgressVue
		},
		onShow() {
			this.getSetting()
		},
		onLoad(options) {
			this.itemData = JSON.parse(options.msg)
			this.getList(JSON.parse(options.msg).name)
			this.getTransactionRecord(JSON.parse(options.msg).name)
		},
		computed: {
			formattedTimes() {
				return this.recordList.map((item, index) => {
					const date = new Date(item.jewerly_history.update_time * 1000)
					const year = date.getFullYear();
					const month = (date.getMonth() + 1).toString().padStart(2, '0');
					const day = date.getDate().toString().padStart(2, '0');
					const hours = date.getHours().toString().padStart(2, '0');
					const minutes = date.getMinutes().toString().padStart(2, '0');
					const formattedTime = `${year}年${month}月${day}日 ${hours}:${minutes}`;
					return {
						...item,
						formattedTime
					};
				})
			}
		},
		methods: {
			//成交记录
			getTransactionRecord(name) {
				let data = {
					name: name
				}
				uni.request({
					url: "/api/jewerly/transactionRecord",
					method: "GET",
					header: {
						token: uni.getStorageSync('token')
					},
					data: data
				}).then(res => {
					if (res.data.code == 303) {
						uni.navigateTo({
							url: "/pages/login/login"
						})
					}
					console.log('123', res.data.data.data);
					this.recordList = res.data.data.data
				})
			},
			getSetting() {
				uni.request({
					url: "/api/index/getSetting",
					method: "POST"
				}).then(res => {
					document.documentElement.style.setProperty('--bg-color', res.data.data.theme_color);
					document.documentElement.style.setProperty('--text-color', res.data.data.font_color);
				})
			},
			getList(name, priceSort) {
				let data = {
					page: this.pageNum,
					limit: 20,
					name: name,
					priceSort: priceSort,
				}
				// console.log(data);
				uni.request({
					url: "/api/jewerly/index_list",
					method: "GET",
					data: data
				}).then(res => {
					// let listdata = res.data.data.data
					this.sellList = res.data.data.data
					// console.log(listdata);
					// if (listdata.length > 0) {
					// 	this.sellList = this.sellList.concat(listdata)
					// 	this.pageNum++
					// }
				})
			},
			//返回
			back() {
				let canNavBack = getCurrentPages()
				if (canNavBack && canNavBack.length > 1) {
					uni.navigateBack()
				} else {
					history.back();
				}
			},
			//出售\成交记录
			changeTab(item, index) {
				this.activeTab = index
			},
			//下拉筛选
			ed(res) {
				console.log(res)
			},
			//打开筛选
			sift() {
				this.siftShow = true
			},
			//筛选弹出开
			siftOpen() {
				console.log('open');
			},
			//筛选弹出关
			siftClose() {
				this.siftShow = false
				console.log('close');
			},
			//筛选返回
			siftBack() {
				this.siftShow = false
				console.log('close');
			},
			//筛选tab
			siftChangeTab(item, index) {
				this.siftTabIndex = index
			},
			//出售列表详情
			sellItem(item, index) {
				let token = uni.getStorageSync('token')
				if (!token) {
					uni.navigateTo({
						url: "/pages/login/login"
					})
					return
				}

				let data = JSON.stringify(item.id)
				uni.navigateTo({
					url: `/pages/detail/detail?data=${data}`
				})
			},
			// 价格排序
			changeSort() {
				this.sortIndex = 1
				if (this.priceSortText == "价格升序▲") {
					this.priceSortText = "价格降序▼"
					this.getList(this.itemData.name, "desc")

				} else if (this.priceSortText == "价格降序▼") {
					this.priceSortText = "价格升序▲"
					this.getList(this.itemData.name, "asc")
				}
			},
			// 默认排序
			defaultSort() {
				this.sortIndex = 0
				this.getList(this.itemData.name)
			},
			// 筛选确定
			siftSure() {
				this.siftShow = false
				this.getList(this.itemData.name, "asc")
			},
			changeStart() {
				if (this.Starttext == "普通") {
					this.Starttext = "StatTrak"
				} else {
					this.Starttext = "普通"
				}
			}
		}
	}
</script>
<style type="text/css">
	@import url("@/static/icon/style.css");
</style>
<style lang="scss" scoped>
	:root {
		--bg-color: ;
		--text-color: ;
	}

	.detailType-page {
		width: 100vw;
		height: 100vh;

		.top {
			width: 100%;
			height: auto;
			background: linear-gradient(to bottom, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.9));
			position: relative;
			overflow: hidden;
			padding-bottom: 5vw;

			.bgImg {
				width: 60vw;
				height: 40vw;
				position: absolute;
				right: 0;
				bottom: 5vw;
				background-size: contain;
				background-position: center;
				background-repeat: no-repeat;
				z-index: 10;
			}

			>view {
				margin-left: 5vw;
			}

			.back {
				width: 7vw;
				height: 7vw;
				margin-top: 8vw;
				font-family: "icomoon";
				font-size: 6vw;
				color: white;
			}

			.back::before {
				content: "\e91d";
			}

			.name {
				width: 90vw;
				height: 10vw;
				font-weight: 600;
				margin-top: 1vw;
				font-size: 5vw;
				color: white;
				z-index: 999;
			}

			.price {
				margin-top: 4vw;
				width: 70vw;
				height: 9vw;
			}

			.attribute {
				width: 50vw;
				height: 9vw;
				margin-top: 1vw;

				>span {
					margin-right: 3vw;
				}
			}

			.changeStarTark {
				width: 23vw;
				height: 8vw;
				border-radius: 5vw;
				display: flex;
				border: 1px solid #ccc;

				.text {
					flex: 1;
					line-height: 8vw;
					text-align: center;
					color: #ccc;
				}

				.icon {
					width: 8vw;
					height: 8vw;
					background-color: rgba(255, 255, 255, 0.7);
					border-radius: 50%;
					font-family: "icomoon";
					font-size: 5vw;
					text-align: center;
					line-height: 8vw;
					color: #efefef;
				}

				.icon::before {
					content: "\e90d";
				}
			}
		}

		.main {
			width: 100%;
			height: 65vh;
			background-color: var(--bg-color);

			.tab {
				width: 100%;
				height: 15vw;
				display: flex;
				background-color: var(--bg-color);

				.tab-item {
					height: 15vw;
					line-height: 15vw;
					margin-left: 5vw;
					display: flex;
					font-size: 4.5vw;
					font-weight: bold;
					color: #787878;
				}

				.active {
					color: var(--text-color);
					position: relative;

					.line {
						width: 6vw;
						height: 1vw;
						position: absolute;
						background-color: white;
						bottom: 0;
						left: calc(50% - 3vw);
					}
				}
			}

			.sell {
				width: 100%;
				height: 63vh;
				background-color: var(--bg-color);

				.siftDrop {
					width: 100%;
					height: 15vw;
					background-color: var(--bg-color);
					position: relative;
					position: sticky;
					top: 0;

					.sort_tool {
						height: 100%;
						display: flex;
						align-items: center;

						.default {
							width: 15vw;
							height: 100%;
							font-size: 4vw;
							font-weight: bold;
							line-height: 15vw;
							color: #787878;
							margin-left: 5vw;
						}

						.priceSort {
							width: 20vw;
							height: 100%;
							font-size: 4vw;
							font-weight: bold;
							line-height: 15vw;
							color: #787878;
							margin-left: 5vw;
						}

						.active {
							color: var(--text-color);
						}
					}

					.sift {
						width: 15vw;
						height: 10vw;
						position: absolute;
						right: 5vw;
						top: calc(50% - 5vw);
						line-height: 10vw;
						font-family: "icomoon";
						font-size: 4vw;
						font-weight: bold;
						z-index: 9999;
						color: white;
					}

					.sift:before {
						content: "\e90f";
						position: absolute;
						right: 0;
						font-size: 5vw;
						font-weight: 100;
						color: #32c8c0;
					}
				}

				.sellList {
					width: 100%;
					height: 56vh;
					background-color: var(--bg-color);

					.sell-item {
						width: 90%;
						height: 25vw;
						margin: auto;
						border-bottom: 1px solid #ccc;
						padding: 3vw 0;
						background-color: var(--bg-color);

						.sell-item-left {
							width: 70%;
							height: 100%;
							display: flex;
							flex-direction: column;
							justify-content: space-between;

							.msg {
								width: 100%;
								height: 100%;

								dl {
									width: 100%;
									height: 100%;
									display: flex;
									justify-content: space-between;

									dt {
										width: 35vw;
										height: 100%;
										background: linear-gradient(to top, #aaa, white);
										position: relative;

										.img {
											width: 100%;
											height: 100%;
											background-size: contain;
											background-position: center;
											background-repeat: no-repeat;
										}

										.wear {
											width: 12vw;
											height: 5vw;
											position: absolute;
											// background-color: rgba(255, 255, 255, 0.5);
											top: 0;
											left: 0;
											font-size: 3vw;
											line-height: 5vw;
											text-align: center;
										}
									}

									dd {
										display: flex;
										flex-direction: column;
										justify-content: space-around;

										.price {
											margin-left: 2vw;
											color: #cd6b0f;

											>span {
												font-size: 5vw;
												font-weight: bold;
											}
										}

										.userinfo {
											width: 100px;
											height: 6vw;
											display: flex;
											justify-content: space-around;

											.avatar {
												width: 6vw;
												height: 6vw;
												background-size: contain;
												border-radius: 50%;
											}

											.username {
												color: #aaa;
											}
										}
									}
								}
							}
						}

						.sell-item-right {
							width: 30%;
							height: 100%;
							display: flex;
							flex-direction: column;
							justify-content: space-between;
							align-items: end;

							.buy-btn {
								width: 15vw;
								height: 7vw;
								background-color: #ccc;
								color: #2A2D2E;
								margin-top: 5vw;
								text-align: center;
								line-height: 7vw;
								font-size: 4vw;
							}

							.printing {
								width: 100%;
								height: 15vw;
								display: flex;
								justify-content: right;

								.printing-item {
									width: 20%;
									height: 100%;
									display: flex;
									flex-direction: column;
									justify-content: space-evenly;
									align-items: center;

									.printing-wear {
										font-size: 2vw;
										color: #b0b0b0;
									}

									.printing-img {
										width: 7vw;
										height: 7vw;
										background-size: contain;
										background-position: center;
										background-repeat: no-repeat;
									}
								}
							}
						}
					}
				}
			}

			.record {
				width: 100%;
				height: 100vw;
				text-align: center;
				font-size: 4vw;
				color: white;
				font-weight: bold;
				overflow-y: scroll;

				.record-item {
					width: 95%;
					height: 150rpx;
					margin: auto;
					margin-top: 20rpx;
					display: flex;
					position: relative;

					.left {
						width: 100%;
						height: 100%;
						display: flex;
						align-items: center;

						.imgBox {
							width: 200rpx;
							height: 90%;
							display: flex;
							justify-content: center;
							align-items: center;
							background: linear-gradient(to top, #aaa, white);

							.img {
								width: 120rpx;
								height: 70%;
								background-size: contain;
								background-position: center;
								background-repeat: no-repeat;
							}
						}


						.msgBox {
							width: calc(100% - 120rpx);
							height: 90%;
							font-size: 20rpx;
							text-align: left;
							display: flex;
							flex-direction: column;
							justify-content: space-around;
							overflow: hidden;
							white-space: nowrap;
							text-overflow: ellipsis;
							padding-left: 15rpx;

							>.name {
								font-size: 26rpx;
							}

							>.price {
								font-size: 30rpx;
								color: #EEA20E;
							}
						}
					}

					.time {
						width: 300rpx;
						height: 30rpx;
						position: absolute;
						white-space: nowrap;
						right: 0;
						bottom: 0;
						font-size: 24rpx;
						text-align: right;
					}
				}
			}
		}

		.siftBox {
			width: 80vw;
			height: 100vh;
			display: flex;
			flex-direction: column;
			background-color: #2A2D2E;
			color: white;

			.sift-top {
				width: 100%;
				height: 8vh;
				text-align: center;
				border-bottom: 1px solid #ccc;
				line-height: 8vh;
				font-size: 5vw;
				font-weight: bold;
				position: relative;

				.back {
					width: 7vw;
					height: 7vw;
					position: absolute;
					line-height: 6vw;
					left: 5vw;
					top: 6vw;
					font-size: 5vw;
					font-family: "icomoon";
				}

				.back::before {
					content: "\e91d";
				}
			}

			.sift-main {
				width: 100%;
				height: 84vh;
				display: flex;

				.left {
					width: 60vw;
					height: 100%;

					.pattern-templates {
						width: 100%;
						height: 100%;
						overflow-y: scroll;

						.title-one,
						.title-two {
							width: 90%;
							margin: 4vw auto;
							font-size: 4.5vw;
							font-weight: bold;
						}

						.box-one {
							width: 90%;
							height: 12vw;
							background-color: #F2F2F2;
							margin: auto;

							.temp-search {
								width: 100%;
								height: 100%;
							}
						}
					}
				}

				.right {
					width: 20vw;
					height: 100%;
					border-left: 1px solid white;

					.right-tab-item {
						width: 100%;
						height: 15vw;
						text-align: center;
						line-height: 15vw;
						font-size: 4vw;
						position: relative;
						color: white;

						.line {
							position: absolute;
							width: 1vw;
							height: 3vw;
							background-color: #1296db;
							left: 0;
							top: calc(50% - 1.5vw);
						}
					}

					.active {
						color: black;
						background-color: white;
					}
				}
			}

			.sift-bottom {
				width: 100%;
				height: 9vh;
				display: flex;
				align-items: center;
				justify-content: space-evenly;

				>button {
					width: 37vw;
					height: 10vw;
					font-size: 4vw;
				}

				.reset {
					background-color: white;
					color: #1296db;
					border: 1px solid #1296db;
				}

				.reset:active {
					background-color: #1296db;
					color: white;
				}

				.sure {
					background-color: #1296db;
					color: white;
				}

				.sure:active {
					background-color: white;
					color: #1296db;
					border: 1px solid #1296db;
				}
			}
		}
	}
</style>